<template>
    <div style="width: 100%;height: 500px;" class="echarts-box" ref="chart"></div>
</template>

<script>
    import api from '../network/api/APIecharts.js'
    export default {
        name: 'sales_bar',

        data() {
            return {

            };
        },

        created() {

        },
        mounted() {
            this.initEchart();
        },

        methods: {

            initEchart() {
                let myChart = this.$echarts.init(this.$refs.chart);
                var data_x = [];
                var data_y = [];

                //柱状图数据
                api.getSevenDaySales().then(res => {
                    console.log(res.data);

                    for (var i = res.data.length - 1; i >= 0; i--) {
                        data_x.push(res.data[i].today);
                        data_y.push(res.data[i].today_sales_money);
                    }

                    // 绘制图表
                    myChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            },
                        
                        },
                        xAxis: {
                            type: 'category',
                            data: data_x
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: data_y,
                                type: 'bar',
                                color:'#E94136',
                                showBackground: true,
                                backgroundStyle: {
                                    color: 'rgba(180, 180, 180, 0.2)'
                                },
                                itemStyle:{
                                    normal:{
                                        label:{
                                            show:true,//开启显示
                                            position:'top',//在上方显示
                                            textStyle:{
                                                //数值样式
                                                color:'#E94136',
                                                fontsize: '20px',
                                            }
                                        }
                                    }
                                }
                            }
                        ]

                    });

                })


            },
        },
    };
</script>

<style lang="scss" scoped>

</style>